<!DOCTYPE html>
<html>
<head>
	<title>刀剑神域 - 虚拟现实世界</title>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

		body {
			margin: 0;
			padding: 0;
			background-color: #000;
			font-family: 'Orbitron', sans-serif;
			color: #0f0;
			overflow: hidden;
		}

		.container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			perspective: 1000px;
		}

		.login-box {
			background-color: rgba(0, 0, 0, 0.7);
			padding: 40px;
			border: 2px solid #0f0;
			border-radius: 10px;
			box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
			text-align: center;
			transform-style: preserve-3d;
			transform: rotateX(30deg) rotateY(20deg);
			animation: rotate 10s infinite linear;
		}

		@keyframes rotate {
			0% {
				transform: rotateX(30deg) rotateY(20deg) rotateZ(0deg);
			}
			100% {
				transform: rotateX(30deg) rotateY(20deg) rotateZ(360deg);
			}
		}

		h1 {
			margin-top: 0;
			font-size: 48px;
			font-weight: 700;
			color: #0f0;
			text-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
			text-transform: uppercase;
			letter-spacing: 5px;
			animation: neon 1.5s ease-in-out infinite alternate;
		}

		@keyframes neon {
			from {
				text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
			}
			to {
				text-shadow: 0 0 20px rgba(0, 255, 0, 0.5), 0 0 30px rgba(0, 255, 0, 0.5), 0 0 40px rgba(0, 255, 0, 0.5), 0 0 70px rgba(0, 255, 0, 0.5), 0 0 80px rgba(0, 255, 0, 0.5);
			}
		}

		input[type="text"], input[type="password"] {
			display: block;
			width: 100%;
			padding: 10px;
			margin-bottom: 20px;
			background-color: rgba(0, 0, 0, 0.7);
			border: 1px solid #0f0;
			border-radius: 5px;
			font-family: 'Orbitron', sans-serif;
			font-size: 16px;
			color: #0f0;
			box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
		}

		button {
			display: block;
			width: 100%;
			padding: 10px;
			background-color: #0f0;
			border: none;
			border-radius: 5px;
			font-family: 'Orbitron', sans-serif;
			font-size: 16px;
			color: #000;
			cursor: pointer;
			transition: background-color 0.3s;
			box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
			position: relative;
			overflow: hidden;
		}

		button:hover {
			background-color: #0f8;
		}

		button::before {
			content: '';
			position: absolute;
			top: -30px;
			left: -100px;
			width: 50px;
			height: 100px;
			background-color: rgba(255, 255, 255, 0.3);
			transform: rotate(45deg);
			animation: sheen 1s infinite;
		}

		@keyframes sheen {
			0% {
				transform: rotate(45deg) translateX(-100px);
			}
			100% {
				transform: rotate(45deg) translateX(300px);
			}
		}

		.background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: radial-gradient(circle, rgba(0, 255, 0, 0.2) 0%, rgba(0, 0, 0, 1) 70%);
			opacity: 0.8;
			z-index: -1;
		}

		.particles {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.particle {
			position: absolute;
			border-radius: 50%;
			opacity: 0.5;
			animation: particle 10s infinite linear;
		}

		@keyframes particle {
			0% {
				transform: translate3d(0, 0, 0) scale(0.5);
				opacity: 0;
			}
			25% {
				opacity: 0.5;
			}
			75% {
				opacity: 0.5;
			}
			100% {
				transform: translate3d(calc(100vw - 100%), calc(100vh - 100%), 0) scale(1);
				opacity: 0;
			}
		}

		.grid {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: repeat(20, 1fr);
			grid-template-rows: repeat(20, 1fr);
			z-index: -2;
			animation: gridAnimation 10s linear infinite;
		}

		@keyframes gridAnimation {
			0% {
				transform: translateX(0) translateY(0);
			}
			100% {
				transform: translateX(-50%) translateY(-50%);
			}
		}

		.grid-line {
			border: 1px solid rgba(0, 255, 0, 0.2);
		}

		.glitch {
			position: relative;
			animation: glitch 2s infinite;
		}

		@keyframes glitch {
			0% {
				text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em 0 0 rgba(0, 255, 0, 0.75), 0 0 0.05em rgba(0, 0, 255, 0.75);
			}
			14% {
				text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em 0 0 rgba(0, 255, 0, 0.75), 0 0 0.05em rgba(0, 0, 255, 0.75);
			}
			15% {
				text-shadow: -0.05em -0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0.05em 0 rgba(0, 255, 0, 0.75), -0.05em 0.05em 0 rgba(0, 0, 255, 0.75);
			}
			49% {
				text-shadow: -0.05em -0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0.05em 0 rgba(0, 255, 0, 0.75), -0.05em 0.05em 0 rgba(0, 0, 255, 0.75);
			}
			50% {
				text-shadow: 0.05em 0.05em 0 rgba(255, 0, 0, 0.75), -0.05em -0.05em 0 rgba(0, 255, 0, 0.75), 0 0 0.05em rgba(0, 0, 255, 0.75);
			}
			99% {
				text-shadow: 0.05em 0.05em 0 rgba(255, 0, 0, 0.75), -0.05em -0.05em 0 rgba(0, 255, 0, 0.75), 0 0 0.05em rgba(0, 0, 255, 0.75);
			}
			100% {
				text-shadow: -0.05em 0 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 0, 0.75), 0 0 0.05em rgba(0, 0, 255, 0.75);
			}
		}

		.scanline {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, transparent 50%, rgba(0, 255, 0, 0.2) 50%);
			background-size: 100% 4px;
			animation: scanline 2s linear infinite;
		}

		@keyframes scanline {
			0% {
				background-position: 0 0;
			}
			100% {
				background-position: 0 4px;
			}
		}
	</style>
</head>
<body>
	<div class="background"></div>
	<div class="particles">
		<!-- <div class="particle" style="background-color: #0f0; width: 10px; height: 10px; left: 10%; top: 20%; animation-delay: 0s;"></div>
		<div class="particle" style="background-color: #0f0; width: 15px; height: 15px; left: 30%; top: 40%; animation-delay: 2s;"></div>
		<div class="particle" style="background-color: #0f0; width: 20px; height: 20px; left: 60%; top: 60%; animation-delay: 4s;"></div>
		<div class="particle" style="background-color: #0f0; width: 25px; height: 25px; left: 80%; top: 80%; animation-delay: 6s;"></div> -->
	</div>
	<div class="grid">
		<div class="grid-line"></div>
		<div class="grid-line"></div>
		<!-- 添加更多网格线 -->
	</div>
	<div class="container">
		<div class="login-box">
			<h1 class="glitch">虚拟现实</h1>
			<input type="text" placeholder="用户名" class="glitch">
			<input type="password" placeholder="密码" class="glitch">
			<button class="glitch">进入游戏</button>
			<div class="scanline"></div>
		</div>
	</div>

	<script>
		// 动态生成网格线
		const grid = document.querySelector('.grid');
		for (let i = 0; i < 400; i++) {
			const gridLine = document.createElement('div');
			gridLine.classList.add('grid-line');
			grid.appendChild(gridLine);
		}
	</script>
</body>
</html>